<template>
  <div
    class="sei-doubleChangeBtn"
    :class="{
      'show-down': isDown,
      'show-up': !isDown,
    }"
  >
    <!-- 箭头 -->
    <div class="circlr-arrow-container">
      <div class="circlr-arrow" />
    </div>
    <!-- 里面背景 -->
    <div class="inner-bg" />

    <div class="unit-container">
      <div class="unit-instance">
        <div class="unit-name">上筒</div>
        <div class="device-img" />
        <div class="unit-name">下筒</div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  isDown: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped lang="less">
.sei-doubleChangeBtn {
  margin: 10px;
  position: relative;
  width: 64px;
  height: 64px;
  background: url('./images/haier/outerBg.png') no-repeat;
  background-size: 100%;
  border-radius: 50%;

  .circlr-arrow-container {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 60px;
    height: 60px;

    .circlr-arrow {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url('./images/haier/circleArrow.png') no-repeat;
      background-size: 100%;
    }
  }

  .inner-bg {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 8px;
    top: 8px;
    background: url('./images/haier/innerBg.png') no-repeat;
    background-size: 100%;
  }

  .unit-container {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 8px;
    top: 8px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 1;
    font-size: 14px;
    font-weight: 500;
    color: #fff;

    // 文字距离边距为5px
    .unit-instance {
      position: absolute;
      left: 9px;
      // top: -37px; // 85-48
      width: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      flex-shrink: 0;

      .unit-name {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .device-img {
        width: 30px;
        height: 40px;
        display: block;
        background: url('./images/device.png') no-repeat;
        background-size: 100%;
      }
    }
  }

  &.show-up {
    .circlr-arrow-container {
      animation: unit-bg-scale 1.28s linear;

      .circlr-arrow {
        animation: dom-rotate360 1.28s linear;
      }
    }

    .inner-bg {
      animation: device-instance-scale 1.32s linear;
    }

    .unit-container {
      animation: device-instance-scale 1.32s linear;
      .unit-instance {
        animation: show-up-animation 2.2s linear forwards;
      }
    }
  }
  &.show-down {
    .circlr-arrow-container {
      animation: unit-bg-scale-down 1.28s linear;

      .circlr-arrow {
        animation: dom-rotate360-down 1.28s linear;
      }
    }

    .inner-bg {
      animation: device-instance-scale-down 1.32s linear;
    }

    .unit-container {
      animation: device-instance-scale-down 1.32s linear;

      .unit-instance {
        animation: show-down-animation 2.2s linear forwards;
      }
    }
  }
}

@keyframes dom-rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes dom-rotate360-down {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 1280ms */
@keyframes unit-bg-scale {
  0% {
    transform: scale(1);
  }

  /* 680ms */
  53.13% {
    transform: scale(1);
  }

  /* 840ms */
  65.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  78.13% {
    transform: scale(0.9);
  }

  /* 1160ms */
  90.63% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}
@keyframes unit-bg-scale-down {
  0% {
    transform: scale(1);
  }

  /* 680ms */
  53.13% {
    transform: scale(1);
  }

  /* 840ms */
  65.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  78.13% {
    transform: scale(0.9);
  }

  /* 1160ms */
  90.63% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/**1320ms */
@keyframes device-instance-scale {
  0%,
  51.52% {
    // 680ms
    transform: scale(1);
  }

  // 840ms
  63.64% {
    transform: scale(1.1);
  }

  // 1000ms
  75.76% {
    transform: scale(0.9);
  }

  87.88% {
    transform: scale(1.05);
  }

  // 1160ms
  100% {
    transform: scale(1);
  }
}
@keyframes device-instance-scale-down {
  0%,
  51.52% {
    // 680ms
    transform: scale(1);
  }

  // 840ms
  63.64% {
    transform: scale(1.1);
  }

  // 1000ms
  75.76% {
    transform: scale(0.9);
  }

  87.88% {
    transform: scale(1.05);
  }

  // 1160ms
  100% {
    transform: scale(1);
  }
}

// 2200ms
@keyframes show-up-animation {
  0% {
    top: -37px;
  }

  60% {
    /* 1320ms-0  */
    top: -37px;
  }

  78.18% {
    /* 1720ms -2  */
    top: 3px;
  }

  83.64% {
    /* 1840ms +2  */
    top: 7px;
  }

  89.09% {
    /* 1960ms  -1 */
    top: 4px;
  }

  94.55% {
    /* 2080ms  +0.5*/
    top: 5.5px;
  }

  100% {
    // 距离边距为5px
    top: 5px;
  }
}

// 2400ms
@keyframes show-down-animation {
  0% {
    top: 5px;
  }

  60% {
    /* 1320ms-0  */
    top: 5px;
  }

  78.18% {
    /* 1720ms -2  */
    top: -39px;
  }

  83.64% {
    /* 1840ms +2  */
    top: -35px;
  }

  89.09% {
    /* 1960ms  -1 */
    top: -38px;
  }

  94.55% {
    /* 2080ms  +0.5*/
    top: -36.5px;
  }

  100% {
    // 距离边距为5px
    top: -37px;
  }
}
</style>
